<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.leftnav {
				background-color: red;
				height: 800px;
				width: 100px;

			}
			.leftnav div:first-child {
				font-size: 50px;
				margin-top: 400px
				
			}
			.left {
				float: left;
			}
			.right {
				float: right;
			}
			.clearfloat::after{
				content: " ";
				display: block;
				clear: both;
			}
			ul {
				list-style: none;
				padding: 0px;
				font-size: 50px
			}
			li {
				padding-bottom: 20px;
				margin-bottom: 40px;
				border-bottom: 1px solid black;
			}
			ul li:last-child{
				border: 0px;
			}
			body {
				margin: 0;
			}
			.rightContent {
				height: 1000px;
				width: 1000px;
				background-color: darkgray;
			}
			.rightContent {
				margin-right: 200px;
			}
			.content {
				width: 200px;
				height: 250px;
				background-color: #00FFFF;
				transition-duration: 0.5s;
				transition-property: all;
			}
			.firstContent {
				width: 100%;
				height: 300px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #FA8072;
				margin-bottom: 20px;
			}
			.rightContent .nav {
				width: 100%;
				height: 50px;
				background-color: antiquewhite;
				margin-bottom: 50px;
				border-bottom: 2px solid black;
				text-align: center;
				font-size: 40px;
				color: #CCFFFF;
			}
			.content:hover {
				box-shadow: 0 0 10px black;
				transform: scale(1.1);
			}
			.secondContent {
				width: 100%;
				height: 400px;
				background-color: wheat;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}
			.secondContent .content {
				height: 300px;
				width: 400px;
			}
			.smallcontent {
				width: 105px;
				height: 100px;
				margin-bottom: 10px;
				background-color: #FA8072;
			}
			.secondContent .content {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
				align-content: space-around;
			}
			.secondContent .content:nth-child(2)
			{
				display: flex;
			}
			.secondContent .content:nth-child(2) .smallcontent
			{
				width: 150px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div class="leftnav clearfloat left" >
			<div class="right" onclick="leftnav_change()">&lt;</div>
			<div class="nav left">
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
				</ul>
			</div>
		</div>
		<div class="rightContent right">
			<div class="nav">
				<span>首页</span>
			</div>
			<div class="firstContent">
				<div class="content">
					
				</div>
				<div class="content">
					
				</div>
				<div class="content">
					
				</div>
			</div>
			<div class="secondContent">
				<div class="content">
					<div class="smallcontent">
						
					</div>
					<div class="smallcontent">
						
					</div>
					<div class="smallcontent">
						
					</div>
					<div class="smallcontent">
						
					</div>
					<div class="smallcontent">
						
					</div>
					<div class="smallcontent">
						
					</div>
				</div>
				<div class="content">
					<div class="smallcontent">
						
					</div>
					<div class="smallcontent">
						
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			//transform: scale(0.5) translateX(200px);
			const leftnav = document.getElementsByClassName("leftnav")[0]
			const gt = document.getElementsByClassName("right")[0]
			gt.style.transitionDuration="1s"
			gt.style.transitionProperty="all"
			console.log(leftnav)
			let con=0;
			const leftnav_change = ()=>{
				console.log("click")
				leftnav.style.transitionDuration = "1s"
				leftnav.style.transitionProperty="all"
				//收缩
				if(!(con%2))
				{
					leftnav.style.transform = "translateX(-70px)"
					// gt.style.transform = "translateX(-10px)"
					gt.style.transform="scale(-1)"
				}
				//扩张
				else{
					leftnav.style.transform = "translateX(0px)"
					// gt.style.transform = "translateX(0px)"
					gt.style.transform="scale(1)"
				}
				con++
			}
			const smallContent = document.getElementsByClassName("smallcontent")
			let op_con=1;
			let up = 1
			setInterval(()=>{
				console.log(op_con)
				if(up==1)
				{
					op_con-=0.01
					if(op_con<0)
					up=0
				}
				else{
					op_con+=0.01
					if(op_con>1)
					up=1
				}
				for(let i=0;i<smallContent.length;i++)
				{
					smallContent[i].style.opacity = op_con.toString()
				}
			},20)
		</script>
	</body>
</html>
